<style>
    .avatars{
        width: 60px;
        border-radius: 50%;
        height: 60px;
    }
    .flex{
        display: flex;
    }
    .bar{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #avatarHr{
        width:50px;
        height:2px;
        background-color:#d9d9d9;
        margin-top:30px;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('请假类型')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-type" data-rule="required" class="form-control selectpicker" name="row[type]">
                <option data-type="type" value="1"  >事假</option>
                <option data-type="type" value="2"  >病假</option>
                <option data-type="type" value="3"  >年假</option>
                <option data-type="type" value="4"  >婚假</option>
                <option data-type="type" value="5"  >产假</option>
                <option data-type="type" value="6"  >陪产假</option>
                <option data-type="type" value="7"  >丧假</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('开始时间')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-start_time" class="form-control datetimepicker" data-rule="required" onblur="inputNums()" name="row[start_time]" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD HH:mm:ss" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('结束时间')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-end_time" class="form-control datetimepicker" data-rule="required" onblur="inputNums()" name="row[end_time]" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD HH:mm:ss" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('天数')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-day" class="form-control" data-rule="required" readonly="readonly" name="row[day]" type="text" value="0">
        </div>
    </div>


    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('请假事由')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea name="row[msg]" data-rule="required" rows="10" cols="67"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="c-img" class="control-label col-xs-12 col-sm-2">{:__('图片')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-img"  data-rule="" class="form-control" size="50" name="row[images]" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-img" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-img"><i class="fa fa-upload"></i> 上传</button></span>
                    <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-img" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> 选择</button></span>
                </div>
                <span class="msg-box n-right" for="c-img"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-img"></ul>
        </div>
    </div>

    <div class="form-group">
        <label for="c-ids" class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('抄送人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-ids" data-rule="required" data-live-search="true" multiple class="form-control selectpicker" name="row[ids][]">
                {foreach $arr as $index=>$vo}
                <option value="{$vo.id}">{$vo.nickname}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('审批人')}:</label>
        <div class="col-xs-12 col-sm-8 flex">
            {foreach $examine as $index=>$vo}
            <div class="bar">
                <img class="avatars" src="{$vo.avatar}">
                <h4 class="title nickname">{$vo.nickname}</h4>
            </div>
            {if condition="$index < $count-1"}
            <div id="avatarHr"></div>
            {/if}
            <input type="hidden" name="row[id][]" value="{$vo.id}">
            {/foreach}
        </div>
    </div>




    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="/assets/img/jquery-3.4.1.min.js"></script>
<script>

    function inputNums() {
        let  start_time = $("#c-start_time").val();
        let  end_time = $("#c-end_time").val();

        //console.log(start_time);
        //console.log(end_time);
        if(start_time&&end_time){
            handleDate(start_time,end_time)
        }
    }

    function handleDate(time1,time2){
        const d = new Date(time1)
        const d2 = new Date(time2)
        let value = (d2 - d)/(1*24*60*60*1000)
        let str = value.toString();
        let strIndex = str.indexOf('.');
        let time3;
        if (strIndex === -1){
            time3 = str
        }else{
            time3 = str.substring(0, strIndex + 2)
        }

        $("#c-day").val(time3);

    }

</script>